<template>
  <div class="charge-index">
    <div class="content">
      <!-- 多站通用 -->
      <div class="title" v-if="cardUseRangeFlag === '1'">我的卡片 ({{ cardList.length }})</div>
      <!-- 单站使用 -->
      <div class="title" v-if="cardUseRangeFlag === '2'">我的卡片 ({{ cardTypeList.length }})</div>
      <div class="title"></div>
      <!-- 1、多站通用 -->
      <template v-if="cardUseRangeFlag === '1'">
        <!-- 单子卡列表 -->
        <div v-for="item in cardList" style="height: 3.2rem;" :key="item.id" class="container-flex" :class="[cardOilsTypeClass[item.cardOilsType]]">
          <div style="flex: 2;justify-content: space-around;" class="cardContainer">
            <div class="text">余额</div>
            <div class="title">
              <span>{{ item.totalAmt.toFixed(2) }}</span>
              <span class="title1">元</span>
            </div>
            <div class="recharge_box" >
              <div class="recharge" @click="goCard2(item)">充值</div>
              <div class="recharge" @click.stop="goAddSubCard((item.id))">添加副卡</div>
            </div>

          </div>
          <div style="flex: 1;" class="container-right">
            <div style="font-size: 0.4rem;color: #fff;margin-bottom: 5px;">
              {{ cardOilsTypeText[item.cardOilsType] }}
            </div>
            <div></div>
          </div>
         <!-- <div class="title">
            {{ cardOilsTypeText[item.cardOilsType] }}
            <span>多站通用</span>
          </div>
          <div class="text">
            余额
            <span>{{ item.totalAmt.toFixed(2) }}</span>
            元
          </div> -->
          <!-- <button @click="goCharge(item)">充值</button> -->
        </div>
      </template>
      <!-- 2、单站使用 -->
      <template v-else-if="cardUseRangeFlag === '2'">
        <!--电子卡列表-->
        <div v-for="(item, index) in cardTypeList" :key="item.id">
          <div style="height: 3.2rem;display: flex;" :class="[cardOilsTypeClass[item.cardOilsType], 'container-flex']">
            <div style="flex: 2;" class="cardContainer">
              <div class="text">余额</div>
              <div class="title">
                <span>{{ item.totalAmt.toFixed(2) }}</span>
                <span class="title1">元</span>
              </div>
              <div class="recharge_box" v-show="item.cardList.length == 1" style="margin-top: 0.6rem;">
                <div  class="recharge" @click="goCard(item.cardList[0])">充值</div>
              <div class="recharge" @click.stop="goAddSubCard((item.cardList && item.cardList[0].id))">添加副卡</div>
            </div>
            </div>
            <div style="flex: 1;" @click="checkoutDropdown(index, item)" class="container-right">
              <div style="font-size: 0.4rem;color: #fff;margin-bottom: 5px;">{{ cardOilsTypeText[item.cardOilsType] }}
                <span v-show="item.cardList.length > 1">
                  <van-icon v-show="item.isUp" size="15" color="#fff" name="arrow-up"/>
                  <van-icon v-show="!item.isUp" size="15" color="#fff" name="arrow-down"/>
                </span>
              </div>
            <div>
              </div>
            </div>
          </div>
          <div style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
            <template v-if="!item.isUp && item.cardList.length > 1">
              <div style="margin-top: 10px;height: 3.2rem;width: 100%;display: flex;" v-for="childItem in item.cardList" :key="childItem.id" :class="[cardOilsTypeClass[childItem.cardOilsType]]" class="container-flex" @click="goCard(childItem)">
                <div style="flex: 2;position: relative;" class="cardContainer">
                  <div class="text" style="width: 200px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                    {{ childItem.stationName }}
                  </div>
                  <div class="text">余额 <span>{{ childItem.totalAmt.toFixed(2) }}</span>元
                  </div>

                  <div class="sub_card" @click.stop="goAddSubCard((childItem.id))">
                    添加副卡
                  </div>
                </div>
                <div
                  style="flex: 1; position: relative;"
                  class="container-right"
                >
                  <div>
                    <div
                      style="font-size: 0.4rem;color: #fff;margin-bottom: 5px;"
                    >
                      {{ cardOilsTypeText[item.cardOilsType] }}
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </template>

      <!-- 实体卡列表 -->
      <div v-for="(item, index) in physicalCardList" :key="index">
        <div class="overlay" v-if="item.cardStatus == '2'" @click.stop> 已注销</div>
        <div class="container-flex stk">
          <div class="div1">
            <span>余额</span>
            <span class="carNo">卡号：{{ item.physicalCardNo }}</span>
          </div>
          <div class="div2">
            <b>{{ item.physicalCardAmount.toFixed(2) }}</b>元
          </div>
          <div class="div3">{{ item.stationName }}</div>
          <div class="div4">
            <div class="charge" @click="goCardStk(item)">充值</div>
            <div class="carName">实体{{ cardOilsTypeText[item.cardType] }}</div>
          </div>
        </div>
      </div>
      <!-- 返利卡 -->
      <div v-show="returnCashCardList.length">
        <div  style="height: 3.2rem;"  :class="[cardOilsTypeClass[5], 'container-flex']">
          <div style="flex: 2;" class="cardContainer">
            <div class="text">余额</div>
            <div class="title">
              <span>{{returnCashAmtTotal}}</span>
              <span class="title1">元</span>
            </div>
          </div>
          <div style="flex: 1;" class="container-right" @click="onCheckDown" >
            <div style="font-size: 0.4rem;color: #fff;margin-bottom: 5px;">
              返利卡
              <span>
                <van-icon v-if="showFanLi"  size="15" color="#fff" name="arrow-down"/>
                <van-icon v-else size="15" color="#fff" name="arrow-up"/>
              </span>
            </div>
            <div></div>
          </div>
        </div>
      </div>
      <div v-show="showFanLi">
        <div v-for="(item,index) in returnCashCardList" style="height: 3.2rem;margin-top:0.4rem;" :key="item.id" class="container-flex" :class="[cardOilsTypeClass[5]]">
          <div style="flex: 2;" class="cardContainer">
            <div class="text" style="width: 200px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
              {{ item.stationName }}
            </div>
            <div class="text"><span>余额</span> <span>{{ item.returnCashAmt.toFixed(2) }}元</span></div>
          </div>
          <div style="flex: 1;" class="container-right" >
            <div style="font-size: 0.4rem;color: #fff;margin-bottom: 5px;">返利卡</div>
            <div></div>
          </div>
        </div>
      </div>
    </div>

    <!-- z这个按钮暂时注释，下个版本会上的 -->
    <div class="addBtn">
      <router-link :to="`/${enterpriseId}/stk`" tag="div">
        <van-button type="danger" plain>+添加实体卡</van-button>
      </router-link>
      <router-link :to="`/${enterpriseId}/subCard`" tag="div">
        <van-button type="danger" plain>副卡管理</van-button>
      </router-link>
    </div>

    <!-- ========================= -->

    <!-- 充值金额弹出框 -->
    <!-- <van-popup v-model="mask" closeable position="bottom" class="mask" round>
      <div class="charge">
        <div class="title">充值</div>
        <div class="tip">会员日充值更优惠，详情请咨询站长</div>
        <div
          class="minAmt"
          v-if="cardOilsTypeText[chargeItem.cardOilsType] === '汽油卡'"
        >
          最低充值金额{{ this.gasolineMinAmt }}
        </div>
        <div
          class="minAmt"
          v-if="cardOilsTypeText[chargeItem.cardOilsType] === '柴油卡'"
        >
          最低充值金额{{ this.dieselMinAmt }}
        </div>
        <div
          class="minAmt"
          v-if="cardOilsTypeText[chargeItem.cardOilsType] === 'LNG卡'"
        >
          最低充值金额{{ this.LNGMinAmt }}
        </div>
        <div
          class="minAmt"
          v-if="cardOilsTypeText[chargeItem.cardOilsType] === 'CNG卡'"
        >
          最低充值金额{{ this.CNGMinAmt }}
        </div>
        <div class="amount">
          <span>{{ cardOilsTypeText[chargeItem.cardOilsType] }}</span>
          <input placeholder="输入充值金额" v-model="chargeAmount" type="number" step="0.01" min="0"
            onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''" />
          <input
            placeholder="输入充值金额"
            v-model="chargeAmount"
            @input="updateChangeAmount"
            type="number"
            step="0.01"
            min="0"
            onkeyup="this.value.includes('.')?this.value=(this.value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')).substring(0, this.value.indexOf('.') + 3)"
          />
          <span>￥</span>
        </div>

        <div
          class="div22"
          style="height:4rem;overflow-y:auto;padding:0rem 0.3rem"
        >
          自定义提示金额
          <div class="container">
            <div
              class="btn tipAmt"
              v-for="(item, index) in customRemindAmountArr"
              :key="index"
              @click="selectRechargeAmt(item)"
            >
              <span>￥</span>
              <span>{{ item }}</span>
            </div>
          </div>

          <div class="container">
            满送活动提示  activityType: "balance" 的列表
            <div
              class="btn"
              v-for="item in discountList"
              :key="item.cardSettingDetailId"
              @click="selectDiscount(item.discountAmtStart)"
            >
              <span>￥</span>
              <span>{{ item.discountAmtStart }}</span>
              <span
                >满{{ item.discountAmtStart }}送{{ item.presentAmt
                }}{{ item.settingRuleType == "1" ? "元" : "%" }}</span
              >
            </div>
            赠送优惠券提示 activityType: "coupon" 列表
            <div
              class="btn"
              v-for="item in discountList2"
              :key="item.cardSettingDetailId"
              @click="selectDiscount(item.discountAmtStart, item)"
              style="display:flex;justify-content:center"
            >
              <span>￥</span>
              <span>{{ item.discountAmtStart }}</span>
              <span
                >满{{ item.discountAmtStart }}送{{ item.presentAmt
                }}{{ item.settingRuleType == "1" ? "元" : "%" }}</span
              >
            </div>
          </div>
        </div>
      </div>
      充值赠送优惠券提示文字
      <div
        v-show="isShowTipText"
        class="tips_text"
        style="position: absolute;color: red;bottom: 1.7rem;text-align: center;width: 100%;"
      >
        <van-icon name="warning" />
        现充值{{ discountAmtStart }}元，还可获得豪华大额券包
      </div>
      确认充值
      <van-button
        :class="[chargeAmount !== '' ? 'selected' : '']"
        :loading="payLoading"
        loading-text="支付中..."
        @click="charge"
        :disabled="
          chargeAmount === '' ||
            chargeAmount <
              minNum(this.cardOilsTypeText[this.chargeItem.cardOilsType])
        "
      >
        确认充值
      </van-button>
    </van-popup> -->

    <!-- 多站通用时，给电子卡选择具体某个站充值 面板 -->
    <van-action-sheet
      v-model="stataionShow"
      :actions="stationActions"
      @select="onStationSelect"
      close-on-click-action
      cancel-text="取消"
    />
    <!-- 遮罩层 -->
    <van-overlay :show="loading" @click="loading = false">
      <van-loading type="spinner" style="text-align:center;top: 50%;" />
    </van-overlay>
  </div>
</template>

<script>
import ProductList from "@/components/ProductList";
import { mapState, mapGetters, mapActions } from "vuex";
import wx from "weixin-js-sdk";
import Vue from "vue";
import { getAuthen } from "@/utils/getAuthen";
import {
  Toast,
  Button,
  Popup,
  NumberKeyboard,
  Icon,
  Collapse,
  CollapseItem,
  Overlay,
  Loading
} from "vant";
import { ActionSheet } from "vant";

Vue.use(Popup);
Vue.use(Toast);
Vue.use(Button);
Vue.use(NumberKeyboard);
Vue.use(ActionSheet);
Vue.use(Icon);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Overlay);
Vue.use(Loading);

export default {
  head() {
    return {
      title: "会员充值"
    };
  },
  data() {
    return {
      operator: null,
      activeNames: [],
      mask: false,
      cardList: [],
      cardUseRangeFlag: "", // 1多站通用 2单站
      cardTypeList: [],
      cardTypeIndex: 0,
      cardTypeChildList: [],
      chargeItem: {},
      chargeAmount: "",
      stationInfo: {},
      payLoading: false,
      show: false,
      discountList: [], // 满送提示胶囊列表
      discountList2: [], // 赠送优惠券提示胶囊列表
      cardOilsTypeClass: ["generic", "gasoline", "diesel", "lng", "cng","flj"],
      cardOilsTypeText: ["通用卡", "汽油卡", "柴油卡", "LNG卡", "CNG卡"],
      tempEnterpriseId: undefined,
      a: undefined,
      b: undefined,
      c: undefined,
      d: undefined,
      e: undefined,
      stataionShow: false,
      stationActions: [], // 油站面板选项列表
      selectedStation: {},
      gasolineMinAmt: 0,
      dieselMinAmt: 0,
      LNGMinAmt: 0,
      CNGMinAmt: 0,
      customRemindAmountArr: [], // 自定义金额
      tipText: "", // 提示文本
      customerCardSettingDetailCouponInfo: {}, // 满送活动卡券信息
      discountAmtStart: 0,
      currentItem: {}, //用于中间取值
      physicalCardList: [], // 实体卡列表
      loading: false,
      urlObj:'',
      returnCashCardList:[],//返利卡
      showFanLi:false,//返利的展示
      returnCashAmtTotal:null,//
    };
  },
  components: {
    ProductList
  },
  computed: {
    ...mapState({
      pointInfo: state => state.point.pointInfo
    }),
    ...mapGetters({
      userInfo: "authen/userInfo"
    }),
    // 控制是否显示赠送优惠券提示
    isShowTipText() {
      if (this.customerCardSettingDetailCouponInfo.discountAmtStart >= 0) {
        return true;
      } else {
        return false;
      }
      // let discountAmtStart = 0;
      // let discountAmtEnd = 0;
      // let chargeAmount = Number(this.chargeAmount);
      // if (this.customerCardSettingDetailCouponInfo.discountAmtStart) {
      //   discountAmtStart = this.customerCardSettingDetailCouponInfo
      //     .discountAmtStart;
      //   discountAmtEnd = this.customerCardSettingDetailCouponInfo
      //     .discountAmtEnd;
      // }
      // // 没有输入充值金额：不显示
      // if (!chargeAmount) return false;
      // // 充值金额满足赠送区间：显示， 不在区间范围内不限制
      // if (chargeAmount >= discountAmtStart && chargeAmount <= discountAmtEnd) {
      //   return true;
      // } else {
      //   return false;
      // }
    }
  },
  async created() {
    // if (!this.userInfo.mobilePhone) {
    //   console.log("111--扫充值码码进入--授权");
    //   getAuthen("", "remit");
    //   return false;
    // }
    this.loading = true;
    let currentUrl = window.location.href;
    this.getNavgatato(currentUrl)
    let urlObj = this.getUrlParams(currentUrl);
    this.operator = urlObj.operator;
    console.log('123',this.operator);
    this.tempEnterpriseId =this.$route.query.enterpriseId || sessionStorage.getItem("enterpriseId");
    sessionStorage.setItem("enterpriseId", this.tempEnterpriseId);
    $nuxt.$store.commit("authen/setEnterpriseId", this.tempEnterpriseId);

    setTimeout(() => {
      const phone = this.phone;
      console.log(phone);
      $nuxt.$store.commit("authen/setPhone", phone);

      // const appId = $nuxt.$store.getters["authen/appId"];

      if (!this.tempEnterpriseId) {
        alert("此页面不支持直接访问");
        return;
      }
      this.init();
    }, 500);
  },
  methods: {
    goAddSubCard(id) {
      this.$router.push({
        path: `/${this.tempEnterpriseId}/subCard/add`,
        query: {id}
      });
    },
    // 去充值
    goCard(item) {
      console.log("33333", item);
      item.operator = this.operator;
      this.$router.push({
        path: "/card/?enterpriseId=" + this.tempEnterpriseId,
        query: {
          item: JSON.stringify(item)
        }
      });
    },
    // 充值---点击选择油站
    goCard2(item) {
      console.log("1111111", item);
      // return
      if (this.stationActions.length == 1) {
        this.selectedStation = this.stationActions[0];
        this.chargeItem = item;
        this.currentItem = item;
        this.chargeItem.stationId = this.selectedStation.stationId;
        this.mask = !this.mask;
        this.goCard({ ...this.currentItem, cardUseRangeFlag: 1 });
      } else {
        this.stataionShow = true;
        this.chargeItem = item;
        this.currentItem = item;
      }
    },
    // 去充值--实体卡
    goCardStk(item) {
      console.log("实体卡：", item);
      let stationIdArr = item.stationId.split(",").map(item => Number(item));
      let list = [];
      // 过滤当前实体卡已经绑定的油站列表
      list = this.stationActions.filter(item => {
        return stationIdArr.includes(item.stationId);
      });
      this.stationActions = list; // 重新赋值给面板
      this.goCard2(item);
      // this.stataionShow = true; // 展示弹框
    },
    // 截取url参数
    getUrlParams(url) {
      const urlSearchParams = new URLSearchParams(url);
      const result = Object.fromEntries(urlSearchParams.entries());
      return result;
    },
    getUrlParams2(url) {
      const params = {};
      const regex = /[?&]([^=#]+)=([^&#]*)/g;
      let match;
      while ((match = regex.exec(url)) !== null) {
        params[match[1]] = decodeURIComponent(match[2]);
      }

      return params;
    },
    checkoutDropdown(index, item) {
      this.cardTypeIndex = index;
      this.cardTypeList[index].isUp = !this.cardTypeList[index].isUp;
      this.cardTypeChildIsUp = this.cardTypeList[index].isUp;
      this.cardTypeChildList = item.cardList;
    },
    onCheckDown(){
      this.showFanLi = !this.showFanLi;
    },
    // 最小值
    minNum(type) {
      const newMap = {
        汽油卡: this.gasolineMinAmt,
        柴油卡: this.dieselMinAmt,
        LNG卡: this.LNGMinAmt,
        CNG卡: this.CNGMinAmt
      };
      return newMap[type] || 0.01;
    },

    // 修改充值金额
    updateChangeAmount(e) {
      var price = "" + e.target.value;
      this.chargeAmount = price
        .replace(/[^\d.]/g, "") // 清除“数字”和“.”以外的字符
        .replace(/\.{2,}/g, ".") // 只保留第一个. 清除多余的
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".")
        .replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); // 只能输入两个小数
      // if (price.indexOf(".") < 0 && price != "") {
      //   // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
      //   this.chargeAmount = '';
      // }
      // console.log('函数' + this.chargeAmount);
    },
    ...mapActions({
      getSdkConfig: "authen/getSdkConfig"
    }),
    onStationSelect(q) {
      this.selectedStation = q;
      console.log("q---1", q);
      this.mask = !this.mask;
      this.currentItem.stationId = q.stationId;

      this.goCard({ ...this.currentItem, cardUseRangeFlag: 1 });
      // this.getDiscount();
    },
    switchMask() {
      this.mask = !this.mask;
    },
    getDiscount() {
      this.discountList = [];
      // 拉取折扣
      this.$axios
        .$get("/getCardRechargeSettingList", {
          params: {
            enterpriseId: this.tempEnterpriseId,
            cardOilsType: this.chargeItem.cardOilsType,
            stationId:
              this.cardUseRangeFlag === "1"
                ? this.selectedStation.stationId
                : this.selectedStation.stationId2
          }
        })
        .then(res => {
          if (res.retCode === 0) {
            this.discountList = res.data[0].customerCardSettingDetailList; // activityType: "balance" 的数据
            this.discountList2 =
              res.data[0].customerCardSettingDetailCouponList; // activityType: "coupon" 的数据
          }
        });
      // 拉取最低充值金额
      this.$axios
        .$get("/getCardRechargeMinAmt", {
          params: {
            enterpriseId: this.tempEnterpriseId
          }
        })
        .then(res => {
          if (res.retCode === 0) {
            this.gasolineMinAmt = res.data[0].gasolineMinAmt;
            this.dieselMinAmt = res.data[0].dieselMinAmt;
            this.LNGMinAmt = res.data[0].LNGMinAmt;
            this.CNGMinAmt = res.data[0].CNGMinAmt;
            if (res.data[0].customRemindAmount) {
              let str = res.data[0].customRemindAmount;
              this.customRemindAmountArr = str.split(",");
            }
            console.log("最低金额:", this.gasolineMinAmt);
            console.log("自定义金额：", this.customRemindAmountArr);
          }
        });
    },

    goCharge(ele) {
      if (this.stationActions.length == 1) {
        this.selectedStation = this.stationActions[0];
        this.mask = !this.mask;
      } else {
        this.stataionShow = true;
      }
      this.chargeItem = ele;
      this.getDiscount();
    },
    goCharges(ele) {
      console.log(ele);
      this.selectedStation = ele;
      this.mask = !this.mask;
      this.chargeItem = ele;
      this.getDiscount();
    },
    charge() {
      // if (this.chargeAmount < this.minNum(this.cardOilsTypeText[this.chargeItem.cardOilsType])) {
      //   Toast.fail('禁止输入最低金额');
      //   return false
      // }
      this.chargeAmount = this.chargeAmount.toString().replace(/\.$/g, "");
      this.pay();
    },
    init() {
      this.$axios
        .$get("/selectStaInfoList", {
          params: {
            enterpriseId: this.tempEnterpriseId
          }
        })
        .then(res => {
          if (res.retCode === 0) {
            if (!!res.data) {
              this.stationActions = res.data.map(ele => {
                return { ...ele, name: ele.stationName };
              });
            }
          }
        });
      // 获取卡片
      this.$axios
        .$get("/getElectronicCardList", {
          params: {
            mobilePhone: this.phone,
            enterpriseId: this.tempEnterpriseId
          }
        })
        .then(res => {
          this.loading = false; // 关闭遮罩层
          if (res.retCode === 0) {
            this.cardUseRangeFlag = res.data.cardUseRangeFlag;
            this.physicalCardList = res.data.physicalCardList || [];
            this.returnCashCardList=res&&res.data&&res.data.returnCashCardList||[]
            let totalReturnCashAmt = this.returnCashCardList.reduce((total, item) => {
                return Number(total) +Number(item.returnCashAmt)
            }, 0);
            this.returnCashAmtTotal=totalReturnCashAmt.toFixed(2)
            console.log('充值返利总数',totalReturnCashAmt);
            if (res.data.cardUseRangeFlag === "1") {
              this.cardList = res.data.cardList;
              console.log("cardList", this.cardList);
            }
            if (res.data.cardUseRangeFlag === "2") {
              res.data.cardTypeList.forEach(item => {
                item.isUp = true;
              });
              this.cardTypeList = res.data.cardTypeList;
              console.log("cardTypeList", this.cardTypeList);
            }
          }
        });
      // this.cardList = [{"id":105,"unionId":"o65PX6a8gYoXrRtsay4nid7vaN-k","customerNo":"11622424586654","customerName":"Joe","amt":55455.83,"cardOilsType":"1","enterpriseId":1,"createTime":"Jun 3, 2021 10:29:58 AM","recentlyTime":"Jun 2, 2021 5:22:26 PM"},{"id":106,"unionId":"o65PX6a8gYoXrRtsay4nid7vaN-k","customerNo":"11619582798963","customerName":"Joe","amt":10005.06,"cardOilsType":"2","enterpriseId":1,"createTime":"Jun 3, 2021 10:29:58 AM","recentlyTime":"Jun 2, 2021 5:22:39 PM"},{"id":115,"unionId":"o65PX6a8gYoXrRtsay4nid7vaN-k","customerNo":"11622424586607","customerName":"Joe","amt":55555,"cardOilsType":"3","enterpriseId":1,"createTime":"Jun 3, 2021 10:29:58 AM"},{"id":116,"unionId":"o65PX6a8gYoXrRtsay4nid7vaN-k","customerNo":"11622424586654","customerName":"Joe","amt":55555,"cardOilsType":"4","enterpriseId":1,"createTime":"Jun 3, 2021 10:29:58 AM"},{"id":119,"unionId":"o65PX6a8gYoXrRtsay4nid7vaN-k","customerNo":"11622538683941","customerName":"Joe","amt":0,"cardOilsType":"5","enterpriseId":1,"createTime":"Jun 3, 2021 10:29:58 AM"}]
      // 这一块纯为了后端方便而已，获取station的信息
      // this.$axios
      //   .$get("/getStationInfo", {
      //     params: {
      //       enterpriseId: this.tempEnterpriseId,
      //     },
      //   })
      //   .then((res) => {
      //     this.stationInfo = res.data;
      //   });
    },
    async pay() {
      try {
        this.payLoading = true;
        console.log(this.operator);
        const orderData = await this.$axios.$post("/rechargeBalance", {
          operator: this.operator || null,
          amt: this.chargeAmount,
          enterpriseId: this.tempEnterpriseId,
          customerName: this.userInfo.nickname,
          cardOilsType: this.chargeItem.cardOilsType,
          mobilePhone: this.phone,
          stationId: this.selectedStation.stationId
            ? this.selectedStation.stationId
            : this.selectedStation.stationId2
        });

        if (orderData.retCode !== 0) {
          throw new Error(orderData.message);
        }

        const orderNum = orderData.data;
        const payInfoData = await this.$axios.$post("/rechargeToThirdPayment", {
          amt: this.chargeAmount,
          openId: this.openId,
          enterpriseId: this.tempEnterpriseId,
          userType: "1",
          orderNo: orderNum,
          stationId: this.selectedStation.stationId
            ? this.selectedStation.stationId
            : this.selectedStation.stationId2
        });
        console.log("payInfoData", payInfoData);
        if (payInfoData.retCode !== 0) {
          throw new Error(payInfoData.message);
        }
        if (payInfoData.data.thirdPayment === "5") {
          window.location.href = payInfoData.data.redirectUrl;
        } else {
          const that = this;
          WeixinJSBridge.invoke(
            "getBrandWCPayRequest",
            {
              appId: payInfoData.data.payAppId,
              timeStamp: payInfoData.data.payTimeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: payInfoData.data.paynonceStr, // 支付签名随机串，不长于 32
              package: payInfoData.data.payPackage, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
              signType: payInfoData.data.paySignType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: payInfoData.data.paySign // 支付签名
            },
            function(res) {
              if (res.err_msg === "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                that.payLoading = false;
                Toast("支付成功");
              } else {
                that.payLoading = false;
                Toast("支付失败，请重试");
              }
            }
          );
          // const timestamp = payInfoData.data.payTimeStamp;
          // const nonceStr = payInfoData.data.paynonceStr;
          // const packageOrg = payInfoData.data.payPackage;
          // const signType = payInfoData.data.paySignType;
          // const paySign = payInfoData.data.paySign;

          // const that = this;
          // // 拉取微信支付
          // this.getSdkConfig({
          //   jsApiList: ["chooseWXPay"],
          // }).then((res) => {
          //   wx.config(res);
          //   wx.ready(function (res) {
          //     wx.chooseWXPay({
          //       timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          //       nonceStr, // 支付签名随机串，不长于 32 位
          //       package: packageOrg, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          //       signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          //       paySign, // 支付签名
          //       success: function (res) {
          //         that.payLoading = false;
          //         alert("支付完成");
          //       },
          //       cancel: function (err) {
          //         that.payLoading = false;
          //         alert("您取消了付款");
          //       },
          //       fail: function (err) {
          //         that.payLoading = false;
          //         alert(err);
          //       },
          //     });
          //   });
          //   wx.error(function (res) {
          //     alert("拉取微信Sdk配置出错");
          //   });
          // });
        }
      } catch (err) {
        this.payLoading = false;
        alert(err);
      }
    },
    // 点击了满送胶囊
    selectDiscount(discount, item = {}) {
      this.chargeAmount = discount; // 输入框的充值金额
      this.discountAmtStart = item.discountAmtStart;
      this.customerCardSettingDetailCouponInfo = item; // 只有点击了activitType是coupon的胶囊才有item值

      console.log("点击的胶囊", item);
      console.log("当前输入的充值金额：", this.chargeAmount);
    },
    // 点击自定义提示金额
    selectRechargeAmt(amt) {
      this.chargeAmount = amt;
      this.customerCardSettingDetailCouponInfo = {}; //  只有点击了activitType是coupon的胶囊才有充值赠送优惠券提示
    },
    // 一键充值连接
    getNavgatato(currentUrl){
      const urlObj2 = this.getUrlParams2(currentUrl);
      console.log(urlObj2, "tempEnterpriseId");
      if ((urlObj2.cardOilsType||urlObj2.cardOilsType == 0) && urlObj2.stationName) {
        localStorage.setItem('routeInfo', JSON.stringify({cardOilsType: urlObj2.cardOilsType, stationName: urlObj2.stationName}))
        this.$router.push({
          path: "/othercard",
          query: {
            enterpriseId: urlObj2.enterpriseId,
            showType: 1
          }
        })
      }
    }
  },
  // beforeRouteEnter(to, from, next) {
  //   next(vm => {
  //     const currentUrl = to.fullPath;
  //     const urlObj2 = vm.getUrlParams2(currentUrl);
  //     console.log(urlObj2, "tempEnterpriseId");
  //     if ((urlObj2.cardOilsType||urlObj2.cardOilsType == 0) && urlObj2.stationName) {
  //       localStorage.setItem('routeInfo', JSON.stringify({cardOilsType: urlObj2.cardOilsType, stationName: urlObj2.stationName}))
  //       vm.$router.replace({
  //         path: "/othercard",
  //         query: {
  //           enterpriseId: urlObj2.enterpriseId,
  //           showType: 1
  //         }
  //       })
  //     }else{
  //       next()
  //     }
  //   });
  // }
};
</script>

<style scoped lang="scss">
.charge-index {
  position: relative;
  min-height: 100vh;
}

.charge-index .background {
  background-color: #f3b335;
  width: 7.5rem;
  height: 7.5rem;
  position: relative;
  background: url("~static/personal/23@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  z-index: -1;
  overflow: hidden;
}

.charge-index .background .headline {
  width: 6.9rem;
  height: 4.33rem;
  background: url("~static/personal/bj2@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  margin: 0.3rem auto;
  display: relative;
}

.charge-index .background .headline .text1 {
  position: absolute;
  left: 0.8rem;
  top: 1.6rem;
  color: #8e9aae;
  font-size: 0.3rem;
  font-weight: 600;
}

.charge-index .background .headline .text2 {
  position: absolute;
  left: 0.8rem;
  top: 2.2rem;
  color: #8e9aae;
  font-size: 0.3rem;
  font-weight: 600;
}

.charge-index .content {
  background-color: #ffffff;
  border-radius: 0.3rem 0.3rem 0 0;
  padding: 0.3rem;
  overflow: scroll;
}
.recharge_box {
  display:flex ;
  align-items: center;
  justify-content: space-between;
  width: 60%;
}
.charge-index .content .recharge {
  // margin-top: 0.7rem;
  background-color: #fff;
  width: 1.2rem;
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
  border-radius: 0.5rem;
  color: #000;
  font-size: 0.2rem;
}
.charge-index .content > div:not(.title) {
  width: 6.9rem;
  /* height: 1.6rem; */
  margin-top: 0.3rem;
  position: relative;
}

.charge-index .content .title {
  font-size: 0.35rem;
  color: #333333;
  font-weight: 600;
}

// 通用卡的背景图
.charge-index .content .generic {
  background: url("~static/personal/bj8@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

// 汽油卡背景图
.charge-index .content .gasoline {
  background: url("~static/personal/qiyouka.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

.charge-index .content .diesel {
  background: url("~static/personal/cyk.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

.charge-index .content .notoil {
  background: url("~static/personal/bj5.2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

.charge-index .content .lng {
  background: url("~static/personal/lng.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

.charge-index .content .cng {
  background: url("~static/personal/cng.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}
.charge-index .content .flj {
  background: url("~static/personal/purple.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}
.charge-index .overlay {
  width: 100%;
  height: 3.2rem;
  position: absolute;
  font-size: 0.5rem;
  font-weight: 500;
  color: white;
  z-index: 11;
  text-align: center;
  line-height: 3.2rem;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0.2rem;
}
// 实体卡的css
.charge-index .content .stk {
  position: relative;
  height: 3.2rem;
  background: url("~static/personal/stk.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  font-weight: 500;
  line-height: 0.45rem;
  div {
    font-size: 0.32rem;
  }
  .div1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;

    .carNo {
      font-size: 14px;
    }
  }
  .div2 {
    margin-bottom: 0.15rem;
    b {
      font-size: 0.45rem;
      margin-right: 0.1rem;
    }
  }
  .div3 {
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.32rem;
    margin-bottom: 0.15rem;
  }
  .div4 {
    text-align: right;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .charge {
      background-color: #fff;
      width: 1.2rem;
      height: 0.5rem;
      text-align: center;
      line-height: 0.5rem;
      border-radius: 0.5rem;
      color: #000;
      font-size: 0.2rem;
    }
    .carName {
      font-size: 0.4rem;
    }
  }
}
// 添加按钮
.addBtn {
  text-align: center;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.3rem;
}

.charge-index .content .cardContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;

}
.sub_card {
  position: absolute;
  bottom: 0.1rem;
  left: 0;
  z-index: 99999;
  margin-top: 0.35rem;
  background-color: #fff;
  width: 1.2rem;
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
  border-radius: 0.5rem;
  color: #000;
  font-size: 0.2rem;
}
.cardContainer2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.charge-index .content div .title {
  height: 0.45rem;
  font-size: 0.45rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 0.45rem;
}
.charge-index .content div .title1 {
  height: 0.45rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 0.45rem;
}

.charge-index .content div .text {
  color: #ffffff;
  height: 0.45rem;
  font-size: 0.32rem;
  font-weight: 500;
  line-height: 0.45rem;
  padding-bottom: 0.35rem;
}

// .charge-index .content .generic .text {
//   color: #999;
// }

// .charge-index .content .gasoline .text {
//   color: #3db58f;
// }

// .charge-index .content .diesel .text {
//   color: #ea8c7d;
// }

// .charge-index .content .notoil .text {
//   color: #898d92;
// }

// .charge-index .content .lng .text {
//   color: #dab899;
// }

// .charge-index .content .cng .text {
//   color: #6977b1;
// }

.charge-index .content div .text span {
  color: #fff;
}

.charge-index .content div button {
  border: none;
  background-color: transparent;
  outline: none;
  display: block;
  width: 1.4rem;
  height: 0.6rem;
  background: #ffffff;
  border-radius: 0.3rem;
  position: absolute;
  top: 0.5rem;
  right: 0.3rem;
}

// 各个充值按钮的颜色
.charge-index .content .generic button {
  color: #6d7278;
}

.charge-index .content .gasoline button {
  color: #24ac81;
}

.charge-index .content .diesel button {
  color: #e87d6d;
}

.charge-index .content .notoil button {
  color: #6d7278;
}

.charge-index .content .lng button {
  color: #d2a781;
}

.charge-index .content .cng button {
  color: #45579e;
}

.charge-index .mask .charge {
  height: 9.5rem;
  background: #f2f2f2;
  border-radius: 0.42rem 0.42rem 0rem 0rem;
  box-sizing: border-box;
  padding: 0.3rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.charge-index .mask .charge > div:not(:nth-child(1)):not(.container) {
  margin-top: 0.2rem;
}

.charge-index .mask .charge .title {
  width: 6.5rem;
  height: 0.45rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #111111;
  line-height: 0.45rem;
  text-align: center;
}

.charge-index .mask .charge .title .close {
  background: url("~static/personal/6_d05_close@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  width: 0.4rem;
  height: 0.4rem;
  float: right;
}

.charge-index .mask .charge .tip {
  height: 0.33rem;
  font-size: 0.24rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 0.33rem;
}

.charge-index .mask .charge .minAmt {
  height: 0.33rem;
  font-size: 0.24rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e87d6d;
  line-height: 0.33rem;
}

.charge-index .mask .charge .amount {
  width: 6.9rem;
  height: 1.2rem;
  background: url("~static/personal/biankuang@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  position: relative;
}

.charge-index .mask .charge .amount span:nth-child(1) {
  height: 0.4rem;
  font-size: 0.28rem;
  font-weight: 600;
  color: #884e16;
  line-height: 0.4rem;
  position: absolute;
  top: 0.4rem;
  left: 0.51rem;
}

.charge-index .mask .charge .amount input {
  background: none;
  outline: none;
  border: none;
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #111111;
  line-height: 0.4rem;
  position: absolute;
  top: 0.4rem;
  left: 2.54rem;
}

.charge-index .mask .charge .amount span:nth-last-child(1) {
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 0.4rem;
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
}

.charge-index .mask button {
  border: none;
  outline: none;
  bottom: 0.7rem;
  position: absolute;
  width: 6.9rem;
  height: 0.8rem;
  left: 0.3rem;
  background: #cccccc;
  border-radius: 0.45rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.45rem;
}

.charge-index .mask > button.selected {
  background-color: #0ea374;
}

.charge-index .mask .container {
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  // padding: 0.3rem 0.3rem;
  justify-content: space-between;
  overflow: scroll;
  // min-height: 2rem;
}

.charge-index .mask .container .btn {
  display: inline-block;
  width: 3.3rem;
  height: 0.84rem;
  background: #ffffff;
  box-shadow: 0 0.04rem 0.08rem 0 #f2f2f2;
  border-radius: 0.42rem;
  margin-bottom: 0.35rem;
  position: relative;
  box-sizing: border-box;
  padding: 0 0.26rem;
  text-align: center;
}
/* 提示金额css */
.charge-index .mask .container .tipAmt {
  display: flex;
  justify-content: center;
  align-items: center;
  > span:nth-of-type(2) {
    font-size: 0.4rem;
  }
}

.charge-index .mask .container .btn:nth-child(odd) {
  margin-right: 0.2rem;
}

.charge-index .mask .container .btn span {
  font-size: 0.3rem;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #895017;
  line-height: 0.84rem;
}

.charge-index .mask .container .btn span:nth-child(1) {
  border-radius: 0.42rem;
  font-size: 0.15rem;
  float: left;
}

.charge-index .mask .container .btn span:nth-child(2) {
  float: left;
  font-weight: 600;
  font-size: 0.4rem;
}

.charge-index .mask .container .btn span:nth-child(3) {
  font-size: 0.15rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.29);
  float: right;
}

.container-flex {
  display: flex;
  flex-direction: row;
  padding: 0.35rem;
  box-sizing: border-box;
}

.container-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.van-cell__title {
  width: 6.9rem;
  height: 1.6rem;
}

.van-collapse-item__content .gasoline {
  height: 1.6rem;
}

.van-collapse-item__content .diesel {
  height: 1.6rem;
}
</style>
